<template>
  <a-card class="addHYmodel">
    <a-modal style="padding: 0;"
      title="新增医生"
      :width="1200"
      :visible="addModalMisible"
      :plain="true"
      :model="forms"
      @ok="submitOk"
      @cancel="addModalMisible=false"
    >
      <a-card :bordered="false">
        <div class="table-page-search-wrapper">
          <a-form layout="inline" :model='form' @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item label="医生姓名" :required="true" :labelCol="labelCol" hasFeedback>
                  <a-input v-model="forms.name" placeholder="请输入医生姓名" type="input"  />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="医生手机号" :required="true" :labelCol="labelCol" hasFeedback>
                  <a-input v-model="forms.mobile" placeholder="请输入医生手机号" type="input"  />
                </a-form-item>
              </a-col>
              <a-col :span="24" style="height:150px;">
                <a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol" :required="true">
                  <j-image-upload @change="handleChange" isMultiple v-decorator="['headImg']"></j-image-upload>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="性别" hasFeedback :required="true">
                  <a-select v-model="forms.sex">
                    <a-select-option value="1">男</a-select-option>
                    <a-select-option value="2">女</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
               <a-col :span="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所在医院" :required="true" hasFeedback>
                  <a-input v-model="forms.hospital" placeholder="请输入医生所在医院" type="input"  />
                  <!-- <a-select v-model="forms.hospital" style="width:140px;">
                    <a-select-option v-for="(item,index) in hospitalList" :value="item.id" :key="index" @click="selectHospital(item)">{{ item.name }}</a-select-option>
                  </a-select> -->
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  :required="true" label="职称" hasFeedback>
                  <a-select v-model="forms.title">
                  <a-select-option value="教授">教授</a-select-option>
                    <a-select-option value="主任医师">主任医师</a-select-option>
                    <a-select-option value="副主任医师">副主任医师</a-select-option>
                    <a-select-option value="主治医师">主治医师</a-select-option>
                    <a-select-option value="医师">医师</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
               
              <a-col :span="24">
                <a-form-item :labelCol="labelCol" required="true"  :wrapperCol="wrapperCol" label="科室" hasFeedback>
                  <a-select v-model="forms.department">
                    <a-select-option v-for="(item,index) in departmentList" :value="item.id" :key="index" @click="selectItem(item)">{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="24">
                <a-form-item :labelCol="labelCol" label="身份证号" :required="true" hasFeedback>
                  <a-input v-model="forms.idcard" placeholder="身份证号" type="input"/>
                </a-form-item>
              </a-col>
               
              <a-col :span="24">
                <a-form-item :labelCol="labelCol" label="医生擅长" :required="true" hasFeedback>
                  <a-input v-model="forms.goodDesc" placeholder="医生擅长" type="input"/>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item :labelCol="labelCol" label="医生简介" :required="true" hasFeedback>
                  <a-input v-model="forms.introductionTitle" placeholder="医生简介" type="input"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-card>
    </a-modal>
  </a-card>
</template>

<script>
import { httpAction, getAction,putAction } from '@api/manage'
import JDate from '@/components/jeecg/JDate'
import JImageUpload from '@/components/jeecg/JImageUpload'
import JEditor from '@/components/jeecg/JEditor'
export default {
  name: '医生管理-添加',
  components: {
    JDate,
    JImageUpload,
    JEditor,
  },
  inject: ['reload'],

  data() {
    return {
      title: '新增医生',
      addModalMisible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      departmentList:[],
      hospitalList:[],
      forms:{
        name:'',
        mobile:'',
        headImg:'',
        hospital:'',
        title:'',
        department:'',
        sex:'',
        idcard:'',
        provinceId:'',
        cityId:'',
        share:'',
        goodDesc:'',
        introductionTitle:''
      },
      form: this.$form.createForm(this),
      url: {
        add: "/doctor/doctor/add",
        hospital: "/doctorRegister/doctorRegister/add",
        department:"/doctor/doctor/department",
      },
    }
  },
  created() {
    // this.viewShow();
  },

  methods: {
    viewShow() {
      this.addModalMisible = true
      //获取科室列表
      getAction(this.url.department).then(res => {
        this.departmentList = res.result;
      })
      //获取医院列表
      getAction(this.url.hospital).then(res => {
        this.hospitalList = res.result.hospitals;
      })
    },
    //选择医院
    selectHospital(item){
      console.log(0,item)
      this.forms.hospital = item.name;
    },
    //上传图片
    handleChange(info) {
      this.forms.headImg = info
    },
    //选择科室
    selectItem(department){
      this.forms.departmentId = department.id;
      this.forms.departmentName = department.name;
    },
    submitOk () {
      if(this.checkForms(this.forms)){
        httpAction(this.url.add, this.forms,'post').then((res)=>{
          if(res.code === 200){
            this.$message.success(res.message)
            this.addModalMisible = false
          }else{
            this.$message.warning(res.message)
          }
        }).catch((error)=>{
          console.log(error);
        })
      }
    },
    //校验表单信息
    checkForms(forms){
      if(forms.name == ''){
        this.$message.warning("请填写医生姓名!")
        return false
      }else if(forms.mobile == '') {
        this.$message.warning("请填写医生手机号！")
        return false
      }else if(forms.headImg == ''){
        this.$message.warning("请上传头像！")
        return false
      }else if(forms.hospital == ''){
        this.$message.warning("请选择所在医院！")
        return false
      }else if(forms.title == ''){
        this.$message.warning("请选择职称！")
        return false
      }else if(forms.department == ''){
        this.$message.warning("请选择科室")
        return false
      }else if(forms.goodDesc  == ''){
        this.$message.warning("请填写医生擅长")
        return false
      }else if(forms. introductionTitle == ''){
        this.$message.warning("请填写医生简介")
        return false
      }else{
        return true
      }
    }
  }
}
</script>

<style lang="less">
  .addHYmodel{
    padding: 0;
    & .ant-modal-body {
          padding: 0!important;
      }
  }
  .ant-modal-body {
          padding: 0 !important;
      }
  .ant-input-number {
    margin-right: 20px;
    width: 360px;
  }

  .ant-btn-danger{background-color: #ff4d4f; border-color: #ff4d4f;}
  .ant-form.ant-form-inline > .ant-row:nth-child(even){height:30px;background:#efefef;}
  // .ant-row:nth-child(even){height:30px;background:#00f;}
  // .ant-form-item:nth-child(odd){background: #eee;}
</style>